<template>
  <div>
    <!-- 头部 -->
    <div class="header">
      <!-- 头部搜索框 -->
      <div class="header-top">
        <span class="hd_logo left">
          <van-icon name="fenlei" class-prefix="icon"   @click="$router.push('/cate')" />
          <span>分类</span>
        </span>
        <van-search
          shape="round"
          background="#3098f5"
          placeholder="满58元包邮 请输入药品名称"
          readonly
        />
        <span class="hd_logo">
          <van-icon name="denglu" class-prefix="icon" @click="$router.push('/login')" />
          <span>登录</span>
        </span>
      </div>
      <!-- 头部热搜 -->
      <div class="header-bottom">
        <span class="resou">热搜 :</span>
        <van-button round type="info" size="small" color="#4fa6f7"
          >板蓝根</van-button
        >
        <van-button round type="info" size="small" color="#4fa6f7"
          >脑白金</van-button
        >
        <van-button round type="info" size="small" color="#4fa6f7"
          >维生素C</van-button
        >
        <van-button round type="info" size="small" color="#4fa6f7"
          >补血</van-button
        >
        <van-button round type="info" size="small" color="#4fa6f7"
          >祛痘药膏</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  flex-direction: column;
  background-color: #3098f5;
  color: white;
  font-size: 0.75rem;
  .header-top {
    display: flex;
    justify-content: space-around;
  }
  .header-bottom {
    display: flex;
    justify-content: space-around;
    text-align: center;
    padding: 0px 6px 10px 13px;
  }
  .van-search {
    width: 73%;
  }
  .resou {
    margin-top: 9px;
  }
  .hd_logo {
    display: flex;
     flex-direction: column;
    padding: 7px;
  }
  .left{
    margin-left: 9px;
  }
  /deep/ .icon{
    font-size: 20px;
    margin-left: 4px;
  }
}
</style>
